<!--
 * @Author: your name
 * @Date: 2020-11-04 15:45:46
 * @LastEditTime: 2021-03-05 16:54:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\productDetail\productSwiper.vue
-->
<template>
  <div class="ProductSwiper ptb10 plr10">
      <div class="left">
          <div class="left_top" v-show="isClient">
            <div v-swiper:ProductSwiper="swiperOption" ref="ProductSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="img" :src="require('~/assets/image/1_25_3.jpg')" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="img" :src="require('~/assets/image/2_22_3.jpg')" alt="">
                    </div>
                </div>  
            </div>
            <div class="swiper-button-prev detail"  slot="button-prev"></div>
            <div class="swiper-button-next detail"  slot="button-next"></div>
          </div>
          <div class="left_bottom">
            <div class="left_bottomThumbs">
                <ul class="swiperUl">
                    <li class="swiperUl_nav mr10" :class="{active: currentIndex === 0}" @click="slideTo(0)"><img class="img" :src="require('@/assets/image/test.jpg')" alt=""></li>
                    <li class="swiperUl_nav mr10" :class="{active: currentIndex === 1}" @click="slideTo(1)"><img class="img" :src="require('@/assets/image/test1.jpg')" alt=""></li>
                    <li class="swiperUl_nav">
                        <img class="img" :src="require('@/assets/image/rorate_360.jpg')" alt="">
                    </li>
                </ul>
            </div>
            <div class="noSomething">
                <div class="onlineTry" @click="showTry()">
                    <img class="img" :src="require('@/assets/image/tryOnline.jpg')" alt="">
                    <span class="txt">{{$t('Try online')}}</span>
                </div>
            </div>
          </div>
      </div>
      <div class="right">
        <h3 class="right_title mb10">{{$t('PARRIE')}}</h3>
        <p class="desc mb10">{{$t('Women glasses acetate  Blue blocking Metal spring hinge is strong and durable')}}</p>
        <div class="rate mb20">
            <div class="rateScore">
                <el-rate v-model="totalScore" disabled :colors="['#3bb5ec', '#3bb5ec', '#3bb5ec']" class="ratedefined"></el-rate>
                <span class="score ml10">(500)</span>
            </div>
            <span class="question" @click="scrollQuestion('AnsweredQuestion')">{{$t('Answeres question')}}(10)</span>
        </div>
        <div class="price mb20">
            <h3 class="newPrice">{{$t('$')}}99.9</h3>
            <span class="oldPrice">{{$t('$')}}280.80</span>
            <span class="tips">{{$t('Buy one get one free')}}</span>
        </div>
        <div class="size mb20">
            <span class="title">{{$t('Size')}}:52-18-440(Medium)</span>
            <span class="sizeGuide" @click="checkSize()">{{$t('Size guide')}}</span>
        </div>
        <div class="favorites mb20" @click="addFavorites()">
            <i class="iconfont icon-aixin1"></i>
            <span class="add">{{$t('Add to Favorites')}}</span>
        </div>
        <div class="color mb20">
            <div class="color_title mb10">{{$t('Color')}}:</div>
            <ul class="color_ul">
                <li class="color_li ptb10" :class="{active: currentColorIndex === 0}" @click="loadColorData(0)">
                    <img class="img" :src="require('@/assets/image/test.jpg')" alt="">
                    <h3 class="title">Brown</h3>
                </li>
                <li class="color_li ptb10" :class="{active: currentColorIndex === 1}" @click="loadColorData(1)">
                    <img class="img" :src="require('@/assets/image/test.jpg')" alt="">
                    <h3 class="title">Brown</h3>
                </li>
                <li class="color_li ptb10" :class="{active: currentColorIndex === 2}" @click="loadColorData(2)">
                    <img class="img" :src="require('@/assets/image/test.jpg')" alt="">
                    <h3 class="title">Brown</h3>
                </li>
            </ul>
        </div>
        <ul class="info mb30">
            <li class="info_li mb20">
                <img class="img" :src="require('@/assets/image/check.jpg')" alt="">
                <span class="txt ml10">{{$t('30-Day money return guarantee')}}</span>
            </li>
            <li class="info_li mb20">
                <img class="img" :src="require('@/assets/image/check.jpg')" alt="">
                <span class="txt ml10">{{$t('2 years guarantee on frame & lenses')}}</span>
            </li>
        </ul>
        <div class="selectLenses mb20"><nuxt-link class="selectLenses_link" :to="{path: '/purchaseLens', query: { id: 1 }}">{{$t('Select lenses')}}</nuxt-link></div>
        <div class="share">
            <span class="share_txt mr20">{{$t('Share')}}:</span>
            <ul class="share_img">
                <li class="mr10">
                    <a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&t='+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
                        <i class="iconfont icon-facebook"></i>
                    </a>
                </li>
                <li class="mr10">
                    <a href="javascript:window.open('https://www.pinterest.com/pin/create/button?url='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
                        <i class="iconfont icon-pinterest"></i>
                    </a>
                </li>
                <li class="mr10">
                    <a href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
                        <i class="iconfont icon-twitter"></i>
                    </a>
                </li>
                <li class="mr10">
                    <a href="javascript:window.open('//plus.google.com/share?url='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
                        <i class="iconfont icon-googleplus"></i>
                    </a>
                </li>
            </ul>
        </div>
      </div>
    <el-dialog :visible.sync="dialogVisible" width="800px">
        <div class="text_c">
            <img v-lazy="dialogImageUrl">
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data() {
      var _self = this;
      return {
        totalScore: 5,
        isClient: false,
        swiperOption: {
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next.detail",
                prevEl: ".swiper-button-prev.detail",
            },
            observer: true,
            observeParents: true,
            on: {
                slideChangeTransitionEnd: function(){
                    if (!_self.initSwiper) {
                        _self.currentIndex = this.realIndex;
                    } else {
                        _self.initSwiper = false;
                    }
                },
            },
            initialSlide: 0
        },
        initSwiper: true, // 判断是否第一次加载
        currentIndex: 0,
        currentColorIndex: 0,
        dialogVisible: false,
        dialogImageUrl: require('~/assets/image/more-size.png'), // 存储大小图片
      }
  },
  computed: {
      swiper() {
        return this.$refs.ProductSwiper.swiper
      }
  },
  methods: {
    ...mapMutations('content', ['SET_QUESTION']),
    /**
     *@param: 
     *@description: 告诉父级显示试戴弹窗
     *@author: Mister Wang
     *@date: 2021-03-05 16:53:40
    */
    showTry () {
        this.$emit("showTry", true)
    },
    slideTo(index) {
        this.currentIndex = index;
        this.swiper.slideTo((index + 1));
    },
    loadColorData(index) {
        this.currentColorIndex = index;
    },
    checkSize() {
        this.dialogVisible = true;
    },
    /*
     *@functionName: 
     *@params: 
     *@description:
     *@author: Mister Wang
     *@date: 2020-11-09 16:23:38
     *@version: V1.0.0
    */
    addFavorites() {
        this.$message({
            message: 'Add to wishlist accessfully!',
            type: 'success',
            center: true
        });
    },
    scrollQuestion(value) {
        if (this.$store.state.content.tabsValue !== value) {
            this.SET_QUESTION(value);
        }
    }
  },
  mounted() {
    this.isClient = true;
  }
}
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.ProductSwiper {
    @include flex();
    justify-content: space-between;
    .left {
        position: relative;
        width: 800px;
        
        box-sizing: content-box;
        &_top {
            position: relative;
            width: $s100;
            height: 490px;
            .swiper-slide {
                width: 100%;
                height: 490px;
            }
            .img {
                width: 100%;
                height: 100%;
            }
        }
        &_bottom {
            @include flex-center(space-between);
        }
        .swiperUl {
            @include flex-center(flex-start);
            &_nav {
                width: 85px;
                height: 40px;
                border: 2px solid $c999;
                box-sizing: border-box;
                padding: 5px;
                cursor: pointer;
                .img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .onlineTry {
            @include flex-center(center);
            border: 2px solid $c999;
            box-sizing: border-box;
            height: 40px;
            border-radius: 5px;
            padding-left: 5px;
            padding-right: 5px;
            cursor: pointer;
            .img {
                width: 25px;
                height: 19px;
            }
            .txt {
                font-size: 12px;
                font-weight: bold;
            }
        }
        .swiper-button-prev {
            left: -10px;
            background: url("../../assets/image/prev-btn.png") no-repeat;
            background-size: $s100 $s100;
            background-position: 50% 50%;
            width: 24px;
            height: 24px;
            outline: none;
        }
        .swiper-button-next {
            right: -10px;
            background: url("../../assets/image/next-btn.png") no-repeat;
            background-size: $s100 $s100;
            background-position: 50% 50%;
            padding: 0;
            width: 24px;
            height: 24px;
            outline: none;                
        }
    }
    .right {
        position: relative;
        width: 280px;
        box-sizing: border-box;
        &_title {
            @include ellipsis();
            font-size: 16px;
            font-weight: bold;
        }
        .desc {
            @include multiline-ellipsis(2);
            font-size: 14px;
            color: $c999;
            line-height: 1.5;
        }
        .rate {
            @include flex-center(space-between);
        }
        .rateScore {
            @include flex-center(flex-start);
        }
        .score,
        .question {
            font-size: 12px;
            color: $c333;
            font-weight: bold;
            cursor: pointer;
        }
        .price {
            @include flex-center(space-between);
        }
        .newPrice {
            font-size: 18px;
            font-weight: bold;
        }
        .oldPrice {
            position: relative;
            font-size: 12px;
            color: $c666;
            &::after {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                width: 100%;
                height: 1px;
                background: $c333;
            }
        }
        .tips {
            color: #f0a005;
        }
        .size {
            @include flex-center(space-between);
            .sizeGuide,
            .title {
                font-size: 13px;
                font-weight: bold;
            }
            .sizeGuide {
                font-size: 13px;
                color: $theme;
                cursor: pointer;
            }
        }
        .favorites{
            cursor: pointer;
            .icon-aixin1 {
                font-size: 18px;
                font-weight: bold;
                color: $theme;
            }
            .add {
                color: $theme;
                font-size: 15px;
            }
        }
        .color {
            
            &_title {
                font-size: 16px;
                font-weight: bold;
            }
            &_ul {
                @include flex-center(flex-start);
                flex-wrap: wrap;
            }
            &_li {
                width: 32%;
                box-sizing: border-box;
                text-align: center;
                margin-right: 5px;
                cursor: pointer;
                &:nth-child(3n) {
                    margin-right: 0;
                }
                .img {
                    width: $s100;
                    height: $s100;
                    margin-bottom: 5px;
                }
                .title {
                    font-weight: bold;
                    font-size: 12px;
                }
            }
        }
        .info {
            font-size: 13px;
            color: $theme;
            font-weight: bold;
            &_li {
                @include flex-center(flex-start);
            }
            .img {
                width: 20px;
                height: 20px;
            }
        }
        .selectLenses {
            @include flex-center(center);
            width: 100%;
            background: $theme;
            border-radius: 5px;
            box-sizing: border-box;
            padding: 15px 0;
            &_link {
                font-size: 18px;
                color: $cfff;
            }
        }
        .share {
            @include flex-center(flex-start);
            &_txt {
                font-size: 14px;
                font-weight: bold;
            }
            .iconfont {
                font-size: 22px;
                &:hover {
                    color: $c666;
                }
            }
            &_img {
                @include flex-center(flex-start);
            }
        }
    }
    .active {
        border: 2px solid $theme !important;
    }
}
</style>